<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {%- set timestamp = now(timestamp=true) -%}

        {%- if page.title -%}
            {% set_global title = page.title %}
        {%- elif section.title -%}
            {% set_global title = section.title %}
        {%- else -%}
            {% set_global title = config.title %}
        {%- endif -%}

        {%- if page.description -%}
            {% set_global description = page.description %}
        {%- elif section.description -%}
            {% set_global description = section.description %}
        {%- else -%}
            {% set_global description = config.description %}
        {%- endif -%}

        {%- if page.permalink -%}
            {% set_global permalink = page.permalink %}
        {%- elif section.permalink -%}
            {% set_global permalink = section.permalink %}
        {%- endif %}

        <title>{%- block title -%}{{- title -}}{%- endblock -%}</title>

        <meta name="description"
              content="{%- block description -%}{{- description -}}{%- endblock -%}">

        <link rel="icon"
              type="image/x-icon"
              href="{{ get_url(path=config.extra.logo_path) | safe }}?v={{ timestamp }}">

        <link href="{{ get_url(path='main.css') | safe }}?v={{ timestamp }}"
              rel="stylesheet">

        <meta property="og:title" content="{{ title }}">
        <meta property="og:description" content="{{ description }}">
        <meta property="og:image"
              content="{{ get_url(path=config.extra.logo_path) | safe }}?v={{ timestamp }}">
        {% if permalink %}<meta property="og:url" content="{{ permalink | safe }}">{% endif %}
    </head>

    <body class="flex flex-col p-2 mx-auto min-h-screen text-lg text-white break-words lg:px-5 2xl:container bg-[#2A3439]">
        <header class="flex flex-col gap-x-4 items-center py-2 px-4 mb-1 rounded-sm sm:flex-row sm:rounded-full bg-black/30">
            <a class="transition duration-500 hover:scale-110"
               href="{{ get_url(path='@/_index.md') | safe }}"
               aria-hidden="true">
                <img class="w-12 h-12"
                     src="{{ get_url(path=config.extra.logo_path) | safe }}"
                     alt="">
            </a>

            <nav class="flex flex-col gap-x-6 items-center font-bold sm:flex-row">
                {% for menu_item in config.extra.menu_items %}
                    {%- if menu_item.url is starting_with("@") -%}
                        {% set_global menu_item_url = get_url(path=menu_item.url) %}
                    {%- else -%}
                        {% set_global menu_item_url = menu_item.url %}
                    {%- endif %}

                    <a class="p-1 no-underline" href="{{ menu_item_url | safe }}">{{ menu_item.name }}</a>
                {% endfor %}
            </nav>
        </header>

        <main class="leading-relaxed">
            {% block content %}{% endblock %}
        </main>

        <footer class="pt-2 pb-1 mt-auto text-sm text-center">
            <div class="inline-flex gap-x-1.5 items-center mx-auto mt-2">
                <img class="w-8 h-8"
                     src="{{ get_url(path='images/rust_logo.svg') | safe }}"
                     alt="">
                <div class="italic">Rustlings is an official Rust project</div>
            </div>

            <nav class="flex flex-col gap-y-3 justify-around py-3 mt-3 rounded-sm sm:flex-row sm:rounded-full bg-black/30">
                {% for footer_item in config.extra.footer_items %}
                    <a class="no-underline" href="{{ footer_item.url | safe }}">{{ footer_item.name }}</a>
                {% endfor %}
            </nav>
        </footer>
    </body>
</html>
